<template>
  <div class="register-detail" v-loading="loading">
    <h2 class="page-title">设备登记详情</h2>
    <ul class="detail">
      <li>
        <div class="label">设备编号</div>
        <p>{{ detail.id }}</p>
      </li>
      <li>
        <div class="label">设备名称</div>
        <p>{{ detail.name }}</p>
      </li>
      <li>
        <div class="label">设备状态</div>
        <p>{{ ($store.getters.statusObj[detail.status] || {}).name }}</p>
      </li>
      <li>
        <div class="label">设备分类</div>
        <p>{{ $store.getters.categoryObj[detail.category] }}</p>
      </li>
      <li>
        <div class="label">数量</div>
        <p>{{ detail.num }}</p>
      </li>
      <li>
        <div class="label">单价</div>
        <p>{{ detail.price }}</p>
      </li>
      <li>
        <div class="label">购入时间</div>
        <p>{{ detail.time }}</p>
      </li>
    </ul>
    <div class="btn-list">
      <template v-if="detail.status === 'STATUS1'">
        <el-button type="primary">编辑</el-button>
        <el-button type="primary" @click="check(id)"
          v-if="$store.state.role === 'admin'">审核</el-button>
      </template>
      <el-button type="primary" @click="approve(id)" v-if="detail.status === 'STATUS2' && $store.getters.isAdmin"
        >入库</el-button>
      <el-button @click="$router.back()">返回列表</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      //动态路径传参，使用$route来取数据
      id: this.$route.params.id,
      detail: {},
    };
  },
  methods: {
    getDatail() {
      this.axios.get("/pre-detail?id=" + this.id).then((data) => {
        if (!data.code) {
          this.detail = data.data;
          this.loading = false;
        }
      });
    },
    // 审核
    check(id) {
      this.$confirm("您确定审核通过该条信息吗?", {
        confirmButtonText: "确定审核",
        cancelButtonText: "暂不操作",
        type: "warning",
      })
        .then(() => {
          this.axios
            .post("/pre-check", {
              id,
            })
            .then((data) => {
              if (!data.code) {
                this.$message({
                  type: "success",
                  message: "审核成功!",
                });
                this.$router.back()
              }
            });
        })
        .catch(() => {});
    },
    // 入库
    approve(id) {
      this.$confirm("您确定入库通过该条信息吗?", {
        confirmButtonText: "确定入库",
        cancelButtonText: "暂不操作",
        type: "warning",
      })
        .then(() => {
          this.axios
            .post("/pre-approve", {
              id,
            })
            .then((data) => {
              if (!data.code) {
                this.$message({
                  type: "success",
                  message: "入库成功!",
                });
                this.$router.back()
              }
            });
        })
        .catch(() => {});
    },
  },
  created() {
    this.getDatail();
  },
};
</script>
